﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>This a Demo for RID</title>
<link href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css"
	type="text/css" rel="stylesheet" />
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<!-- Using Firebug in IE , uncomment following! -->
<!-- <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script> -->
<script src="RID.js"></script>
</head>

<body>
<div>身份证：<input id="rid" maxLength="18" /></div>
<div>生 日：<input id="birthday" /></div>
<div>性 别：<input id="gender" /></div>
<div>常住户口地址：<input id="addr" size="100" /></div>



</body>
</html>
<script>
	Ext
			.get('rid')
			.on(
					'blur',
					function(evt, el, o) {
						function highlightNaN(left15or17, msg, lastBit,
								lastBitRegExp) {
							var rstr = '<b style="background-color:yellow;border-bottom-color:red;border-bottom-style:double;">$1</b>';
							var ret = '<div style="white-space:nowrap;font-size:14px;">'
									+ '<div style="">'
									+ msg
									+ '</div><br />'
									+ '<div style="">'
									+ left15or17.replace(/(\D)/g, rstr)
									+ (lastBit ? lastBit.replace(lastBitRegExp,
											rstr) : '') + '</div>' + '</div>';
							return ret;
						}
						//console.log(el);
						el.value = el.value.toUpperCase();
						var ridInput = el;
						var rid = new RID(ridInput.value);

						var ivi = rid.getInvalidInfo();
						var iviType = ivi ? ivi.type : 'OK';
						switch (iviType) {
						case 'Neither15Nor18':
							Ext.Msg.alert('温馨提示',
									'<div style="white-space:nowrap;font-size:14px;">'
											+ ivi['zh'] + '</div>', function() {
										ridInput.focus(); //强制
									});
							break;
						case 'ChecksumNeitherDigitNorX_OrLeft17NaN':
							Ext.Msg.alert('温馨提示', highlightNaN(ridInput.value
									.slice(0, -1), ivi['zh'], ridInput.value
									.slice(-1), ivi.checksumRegExp),
									function() {
										ridInput.focus(); //强制
									});
							break;
						case '15NaN':
							Ext.Msg.alert('温馨提示', highlightNaN(ridInput.value,
									ivi['zh']), function() {
								ridInput.focus(); //强制
							});
							break;
						case 'FixPositionInvalid':
							var pm = rid.getParseModel();
							var addr = pm.addressCode;
							var y = pm.birthDay.parts.yearCode;
							var m = pm.birthDay.parts.monthCode;
							var d = pm.birthDay.parts.dateCode;
							var bth = y + m + d;
							var oc = pm.orderCode.code;
							var cs = pm.checksum ? pm.checksum : "";

							var colorStyle;

							var msg = [ '<ol style="list-style-type:disc;">' ];
							for ( var invalid in ivi.items) {
								switch (invalid) {
								case 'AddressCodeInvalid':
									colorStyle = 'background-color:green;';
									msg
											.push('<li style="MARGIN-LEFT: 20px;' + colorStyle + '">'
													+ ivi.items[invalid]['zh']
													+ '</li>');
									addr = '<span style="' + colorStyle + '">'
											+ addr + '</span>';
									break;
								case 'BirthDayInvalid':
									colorStyle = 'background-color:yellow;';
									msg
											.push('<li style="MARGIN-LEFT: 20px;' + colorStyle + '">'
													+ ivi.items[invalid]['zh']
													+ '</li>');
									y = ivi.items[invalid].yearInvalid ? '<b style="border-bottom-color:red;border-bottom-style:double;">'
											+ y + '</b>'
											: y;
									m = ivi.items[invalid].monthInvalid ? '<b style="border-bottom-color:red;border-bottom-style:double;">'
											+ m + '</b>'
											: m;
									d = ivi.items[invalid].dateInvalid ? '<b style="border-bottom-color:red;border-bottom-style:double;">'
											+ d + '</b>'
											: d;
									bth = '<span style="' +colorStyle+'">' + y
											+ m + d + '</span>';
									break;
								case 'ChecksumInvalid':
									colorStyle = 'background-color:brown;';
									msg
											.push('<li style="MARGIN-LEFT: 20px;' + colorStyle + '">'
													+ ivi.items[invalid]['zh']
													+ '</li>');
									cs = '<span style="font-weight:bolder;' + colorStyle + '">'
											+ cs + '</span>';
									break;
								}
							}
							msg.push('</ol><br />');
							msg.push('<span style="">' + addr + bth + oc + cs
									+ '</span>');

							var dlg = Ext.Msg
									.confirm(
											'温馨提示',
											'<div style="white-space:nowrap;font-size:14px;text-align:left;">您确认身份证号码正确吗?<br />我们从您输入的号码中发现了如下问题:<br />'
													+ msg.join('') + '</div>',
											function(bt) {
												if (bt == 'yes') {
													autoFill(
															rid.getBirthDay(),
															rid
																	.getGenderGB2261Code(),
															rid.getAddress()
																	.join('-'));
												} else {
													ridInput.focus();
												}
											}).getDialog();
							dlg.defaultButton = 2;
							dlg.focus();
							break;
						case 'OK':
							autoFill(rid.getBirthDay(), rid
									.getGenderGB2261Code(), rid.getAddress()
									.join('-'));
							break;
						}

						function autoFill(date, gender, addr) {
							Ext.get('birthday').dom.value = date
									.format('Y-m-d');
							Ext.get('gender').dom.value = gender == 1 ? '男'
									: '女';
							Ext.get('addr').dom.value = addr;
						}
					});
</script>